// 布局间距
$gridSpacing:12px;
// 元素间距 | /materials
$eleSpacing:12px;
// 颜色 | /materials
$defaultColor:#556ee6;

$white:#FFF;
$primary:#556ee6;

// 全局宽度
@mixin frondWidth {
  @media (min-width:1600px) {
    max-width    : 100%;
    width        : 100%;
    padding      : 20px 20px 0 20px; 
    margin-right : auto;
    margin-left  : auto;
  }

  @media (max-width:1599.9px) {
    max-width    : 100%;
    width        : 100%;
    padding      : 16px 16px 0 16px; 
    margin-right : auto;
    margin-left  : auto;
  }

  @media (max-width:1439.9px) {
    max-width    : 100%;
    width        : 100%;
    padding      : 12px 12px 0 12px; 
    margin-right : auto;
    margin-left  : auto;
  }
}
// iconfont 定义
@mixin iconfont {
  font-size: 13px;
  color    : #ffffff;
}
/* 滚动条定义 */
@mixin scroll{
  &::-webkit-scrollbar {
    width: 6px;
    height: 6px;
  }
  &::-webkit-scrollbar-track {
    background: transparent;
    border-radius: 4px;
  }
  &::-webkit-scrollbar-thumb {
    background: #eff2f7;
    border-radius: 4px;
    border-right: 2px solid #FFF;
  }
}
/* 横向滚动条 */
@mixin scrollbar{
  &::-webkit-scrollbar {
    width: 10px;
    height: 10px;
    border-radius: 30px;
  }
  /*滚动条的轨道*/
  &::-webkit-scrollbar-track {
    background: transparent;
    border-radius: 4px;
  }
  /*滚动条里面的小方块，能向上向下移动*/
  &::-webkit-scrollbar-thumb {
    background-color: #bfbfbf;
    border-radius: 30px;
    border: 1px solid #F1F1F1;
    box-shadow: inset 0 0 6px rgba(0,0,0,.3);
  }
  &::-webkit-scrollbar-thumb:hover {
    background-color: #A8A8A8;
  }
  &::-webkit-scrollbar-thumb:active {
    background-color: #787878;
  }
  /*边角，即两个滚动条的交汇处*/
  &::-webkit-scrollbar-corner {
    background-color: #FFFFFF;
  }
}